<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import http from "../utils/request";
import { useRouter } from "vue-router";
let proarr = ref([]);
let router = useRouter()
let list = ref([])
let keya = ref('')
let rid = ref('')
let username = ref('')
let getpro = async () => {
  username.value = JSON.parse(sessionStorage.getItem("obj"))[0].username
  rid.value = sessionStorage.getItem("rid");
  let {
    data: { code, data },
  } = await http.get("/IOA_list/" + rid.value);
  proarr.value = data;
};

let handleSelect = (key, keyPath) => {
  list.value = proarr._rawValue.find((item) => item.url == key);
   keya.value = key;
   console.log(key);
   
};

const handleOpen = (key, keyPath) => {
  router.push(key)
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

const menuItems = computed(() => {
  if (
    list.value &&
    Array.isArray(list.value.children) &&
    list.value.children.length > 0
  ) {
    return list.value.children;
  }
  return []; // 如果没有有效的 children，就返回一个空数组
});

onMounted(() => {
  getpro();
});
const activeIndex = ref("/Business_Management");
const activeIndex2 = ref("/Business_Management/reservation");
</script>

<template>
<el-container class="container">
    <el-header class="header">
      <p class="title_name">酒店管理系统</p>
      <el-menu
        show-timeout="3000"
        hide-timeout="3000"
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        router
      >
        <!-- <el-menu-item index="/" style="margin-right: 200px">
        <img style="width: 100px" src="./public/logo.png" alt="Element logo" />
      </el-menu-item> -->
        <el-menu-item
          v-for="item in proarr"
          :index="item.url + ''"
          :key="item._id"
          class="el-menu-item"
          >{{ item.IOA_name }}
          
        </el-menu-item>
        
      </el-menu>
      <div class="account_number">
        <img class="img" src="../../public/樱花树.jpg" alt="">
        <!-- <img class="img" src="../../public/水中猫.jpg" alt=""> -->
        <p class="username">{{ username }}</p>
      </div>
      <div></div>
    </el-header>
    <el-container>
      <el-aside class="aside" width="200px">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-vertical-demo"
          background-color="#5d4f96"
          active-text-color="white"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
          router
          
          
        >
          <el-menu-item
            v-for="i in menuItems"
            :key="i._id"
            :index="keya+i.url + ''"
            class="el-menu-item2"
            >{{ i.IOA_name }}</el-menu-item
          >
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style  scoped>

.header {
  display: flex;
  justify-content: space-between;
}

.el-container{
  height: 100vh;
}

.el-aside{
  background-color: #5d4f96;
}
.title_name{
  font-size: 30px;
  line-height: 0px;

}

.el-menu--horizontal{
  border-bottom: none;
}

.el-menu{
  text-align: center;
}

.el-menu-item{
  padding: 0 50px;
;
}

.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 2px solid #5d4f96;
    color: #5d4f96!important;
}
.account_number{
  width: 160px;
  height: 50px;
  border-radius: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #5d4f96;
}
.img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.username{
  font-size: 15px;
  color: #5d4f96;
  padding-right: 30px;
}

.el-menu-item2{
  display: block;
  color: #aea7ca;
}

.el-menu-item.is-active{
  color: white;
}
</style>
